<template>
    <div class="header">
        <div class="left">
            <img src="../static/logo.png">
        </div>
        <div class="center">
            <el-input placeholder="请输入内容" />
        </div>
        <div class="right">
            <div class="avatar">
                <el-popover placement="bottom" :width="400" trigger="click" v-if="!userInfo.avatarUrl">
                    <template #reference>
                        <img src="../static/logo-samll.png">
                    </template>
                    <Login @get-user-info="getUserInfo"></Login>
                </el-popover>
                <img :src="userInfo.avatarUrl" class="avatarImg" slot="reference" v-else>
            </div>
            <div class="userName" v-if="userInfo.nickname">
                {{userInfo.nickname}}
            </div>
            <span v-else>点击图标登录</span>
        </div>

    </div>
</template>

<script setup>
import Login from '../components/Login.vue'
import {ref,reactive,onBeforeMount} from 'vue'
import request from '../api/index'
import useStore from '../store/idnex'
const store = useStore()
// 子组件传来的用户信息
const userInfo = ref({})
const getUserInfo = async(info) => {
    userInfo.value = info
}

onBeforeMount(() => {
    getCurrentUserInnfo()
})

//为了刷新丢失用户信息，每次加载组件发起获取用户信息的请求
const getCurrentUserInnfo = async() => {
    let res = await request('/user/detail',{
        uid:window.localStorage.getItem('userId')
    })
    if (res.data.profile != null) {
       userInfo.value = res.data.profile
    //    更新登录状态
        store.updateLoginState(true)
        window.localStorage.setItem("userId",res.data.profile.userId)
    }else{
        store.updateLoginState(false)
        if (window.localStorage.getItem("userId")) {
            window.localStorage.removeItem("userId")
        }
    }
}

</script>

<style scoped>
.header {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 800px;
}

.left {
    width: 150px;
    height: 100%;
    margin: 10px 100px 10px 0;
}

.left img {
    width: 100%;
}

.center {
    margin: auto 20px
}

.right {
    position: absolute;
    right: 50px;
    width: 150px;
    height: 100%;
    display: flex;
    align-items: center;
}

.avatar{
    align-items: center;
    display: flex;
    flex-direction: row;
}
.right img {
    height: 40px;
    width: 40px;
    margin-right: 10px;
    cursor: pointer;
    align-items: center;
}
.avatarImg{
    border-radius: 50%;
    cursor: pointer;
}

.right span {
    color: white;

    font-size: 16px;
}
.userName{
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
}
</style>